<template>
    <!-- 后台顶部 -->
    <div style="line-height: 60px;display: flex;">
        <div style="flex: 1;font-size: 25px;">
            <span :class="isCollapse == false ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
                style="cursor: pointer;font-size: 18px;" @click="collapse"></span>
            <el-breadcrumb style="display: inline-block;margin-left: 20px;" separator="/">
                <el-breadcrumb-item v-for="(item) in breadcrumbList" :key="item.path" :to="{ path: item.path }">
                    {{ item.name }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
            <div style="display: inline-block">
                <img :src="imageUrl" alt=""
                    style="width: 30px; border-radius: 50%; position: relative; top: 5px; right: 5px">
                <span>{{ nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <router-link to="/password" style="text-decoration: none">修改密码</router-link>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <router-link to="/person" style="text-decoration: none">个人信息</router-link>
                </el-dropdown-item>
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                    <span style="text-decoration: none" @click="logout">退出</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: "Header",
    props: {
        isCollapse: Boolean,
        collapse: Function,
    },
    created() {
        this.getUser().then(res => {
            this.imageUrl = "http://localhost:8081/common/download?name=" + res.image
            this.nickname = res.nickname
        })

    },
    computed: {
        currentPathName() {
            return this.$store.state.currentPathName;　　//需要监听的数据
        },
        breadcrumbList() {
            console.log("当前后台的====>", this.$route.matched)
            return this.$route.matched
        }
    },
    mounted() {
        this.$bus.$on("getUserImage", this.clog)
    },
    beforeDestroy() {
        this.$bus.$on("getUserImage")
    },
    data() {
        return {
            paths: [],
            imageUrl: '',
            nickname: '',
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        }
    },
    methods: {
        logout() {
            this.$store.commit("logout")
            this.$message.success("退出成功")
        },
        clog(user) {
            console.log("当前heade111r==>", user)
            this.imageUrl = "http://localhost:8081/common/download?name=" + user.image;
            this.nickname = user.nickname;
        },
        async getUser() {
            return (await this.request.get("/user/username/" + this.user.username)).data
        }
    }
}
</script>




</style>